<template>
  <div class="knowledge">
     <div class="centered">
        <div class="knowledge-header">
            <span class="left"></span>
            <h3>安全知识</h3>
            <p>SAFETY KNOWLEDGE</p>
            <span class="right"></span> 
        </div>
        <div class="contents">
            <ul>
                <li v-for="(knowledges, index) in knowledge" :key="index">
                    <router-link :to="{name:'SecurityDetailsPage',params:{id:knowledges.id}}">
                        <img :src="knowledges.cover" alt="">
                    </router-link>
                    <dl>
                        <dt>
                            <router-link :to="{name:'SecurityDetailsPage',params:{id:knowledges.id}}" >{{knowledges.title}}</router-link>
                        </dt>
                        <dd v-html="knowledges.excerpt"></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <router-link :to="{ path: '/Safety'}" class="button">查看更多</router-link>
         
     </div>
  </div>
</template>
<script>
export default {
  name: 'Knowledge',
  data(){
      return{
        knowledge: [],
        first:{}
      }
  },
  created(){
      var node = this;
      window.$.get(this.apiUrl + '/articles/home',{
              category: 2,
              limit: 3
      }, function(res){
          node.knowledge = res.data;
          node.knowledge.unshift(res.meta.first);
      })
  }
}
</script>
<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
  overflow: hidden;
}
.knowledge{
    width: 100%;
    height: 560px;
    margin-top:150px; 
}
.knowledge .centered{
    width: 1213px;
    height: 560px;
    margin: 0 auto;
    position: relative;
}
.knowledge .centered .knowledge-header{
    width: 100%;
    height: 61px;
    position: relative;
    text-align: center;
}
.knowledge .centered .knowledge-header h3{
  width: 218px;
  height: 45px;
  font-size: 36px;
  color: #110567;
  line-height: 30px;
  display: inline-block;
}
.knowledge .centered .knowledge-header p{
  width: 194px;
  height: 18px;
  font-size: 18px;
  line-height: 16px;
  color: #000;
  position: absolute;
  left: 510px;
  top: 46px;
}
.knowledge .centered .knowledge-header .left{
  width: 290px;
  border-top: solid 3px #009ae9;;
  position: absolute;
  left: 164px;
  top: 18px;
}
.knowledge .centered .knowledge-header .right{
  width: 290px;
  border-top: 3px solid #009ae9;
  position: absolute;
  right: 170px;
  top: 18px;
}
.knowledge .centered .contents ul{
  width: 1213px;
  height: 331px;
  margin-top: 60px;
}
.knowledge .centered .contents ul li{
  float: left;
  margin-left: 25px;
  width: 380px;
  height: 331px;
}
.knowledge .centered .contents ul li>a{
  width: 280px; 
  height: 210px;
  display: inline-block; 
}
.knowledge .centered .contents ul li>a img{
    width: 363px;
    height: 237px;
}
.knowledge .centered .contents ul li:nth-child(1){
    margin-left: 0px;
}

.knowledge .centered .contents ul li dl{
    margin-top: 20px;
    width: 380px;
    height: 122px;
    text-align: center;
}
.knowledge .centered .contents ul li dl dt{
    width: 100%;
    height: 19px;
    font-size: 18px;
    color: #009ae9;
    line-height: 19px; 
}
.knowledge .centered .contents ul li dl dt a{
    width: 100%;
    height: 19px;
    font-size: 18px;
    color: #009ae9;
    line-height: 19px;
    display: inline-block;
    text-decoration: none; 
}
.knowledge .centered .contents ul li dl dd{
    margin-top: 17px;
    width: 100%;
    height: 38px;
    text-align: left;
    line-height: 18px;
    text-align: center;
    overflow: hidden;
}
.knowledge .centered .button{
  width: 170px;
  height: 50px;
  background-color: #009ae9;
  border: 0;
  border-radius: 20px;
  outline: none;
  position: absolute;
  top: 509px;
  left: 530px;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  text-align: center;
}
.knowledge .centered button a{
  display: inline-block;
  width: 170px;
  height: 50px;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-decoration: none;
}
</style>
